<template>
    <div>
        <el-form :inline="true" :model="searchParam" class="demo-form-inline">
            <el-form-item>
                <el-input
                    clearable
                    v-model="searchParam.version"
                    placeholder="版本号"
                />
            </el-form-item>
            <el-form-item style="width: auto">
                <el-button type="primary" @click="search" size="small">查询</el-button>
                <el-button type="primary" @click="addView(null,'add')" size="small">添加</el-button>
                <el-button type="danger" @click="addView(null,'add')" size="small">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="data.updateLogs" border style="width: 100%" v-loading="data.loading"
                  element-loading-text="拼命加载中" @selection-change="handleSelectionChange">
            <el-table-column type="selection" align="center" width="70px"/>
            <el-table-column prop="version" label="版本号" align="center" width="150px"/>
            <el-table-column prop="contents" label="更新内容" align="center" width="300px">
                <template #default="scope">
                    <el-tag type="info" disable-transitions v-for="content in scope.row.contents" :key="content">
                        {{ content }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="isTop" label="是否置顶" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.isTop === true ? 'success' : 'primary'"
                        disable-transitions
                    >{{ scope.row.isTop === true ? "置顶" : "未置顶" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="isPush" label="是否推送" align="center" width="150px">
                <template #default="scope">
                    <el-tag
                        :type="scope.row.isPush === true ? 'success' : 'danger'"
                        disable-transitions
                    >{{ scope.row.isPush === true ? "是" : "否" }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="createTime"
                label="创建时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column
                prop="updateTime"
                label="更新时间"
                width="180"
                align="center"
            >
            </el-table-column>
            <el-table-column label="操作" width="350">
                <template #default="scope">
                    <el-button
                        class="button-space"
                        @click="pushUpdateLog(scope.row.uuid)"
                        v-if="!scope.row.isPush"
                        type="success"
                        size="small"
                    >推送
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="addView(scope.row,'edit')"
                        type="info"
                        size="small"
                    >修改
                    </el-button>
                    <el-button
                        class="button-space"
                        @click="showResetPassword(scope.row)"
                        v-if="scope.row.isSetBasicMessage"
                        type="info"
                        size="small"
                    >重置密码
                    </el-button>
                    <el-popconfirm
                        title="你确定要删除该版本日志吗？"
                        confirm-button-text="是"
                        cancel-button-text="否"
                        @confirm="deleteUpdateLog(scope.row.uuid)"
                    >
                        <template #reference>
                            <el-button
                                class="button-space"
                                type="danger"
                                size="small"
                            >删除
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="data.total"
            style="text-align: center; margin-top: 10px"
            @current-change="currentChange"
        >
        </el-pagination>
        <!-- 添加或修改更新日志 -->
        <el-dialog
            v-model="data.updateLogAddOrUpdateDisable"
            title="新增更新日志"
            width="60%"
            :before-close="handleClose"
        >
            <el-form :model="updateLogAddOrUpdateData" :rules="rules" ref="addFormRef">
                <el-form-item label="版本号" label-width="130px" prop="version">
                    <el-input v-model="updateLogAddOrUpdateData.version" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="更新内容" label-width="130px" prop="contents">
                    <el-card class="box-card">
                        <template #header>
                            <div class="card-header">
                                <span>具体内容</span>
                                <el-button class="button" type="primary" @click="addContent">添加内容</el-button>
                            </div>
                        </template>
                        <el-form-item :label="`更新日志${index + 1}`" label-width="80px"
                                      style="margin-top: 10px"
                                      v-for="(contentItem,index) in data.contentItems" :key="index">
                            <el-input v-model="contentItem.content" autocomplete="off" style="width: 400px"/>
                            <el-button type="danger" @click="deleteContent(index)" text>删除</el-button>
                        </el-form-item>
                    </el-card>
                </el-form-item>
                <el-form-item label-width="130px">
                    <el-button @click="data.updateLogAddOrUpdateDisable = false">取 消</el-button>
                    <el-button type="primary" @click="addOrUpdateLog">确认</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import {page, add, deleted, update, push} from "@/api/updateLog/updateLog";
import {reactive, onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
    setup() {
        const searchParam = reactive({
            page: 1,
            size: 10,
            version: ''
        })
        const data = reactive({
            updateLogs: [],
            total: 0,
            updateLogAddOrUpdateDisable: false,
            title: '',
            updateLogUuid: '',
            contentItems: []
        })
        const updateLogAddOrUpdateData = reactive({
            version: '',
            contents: []
        })
        const rules = reactive({
            version: [
                {
                    required: true,
                    message: "请输入版本号",
                    trigger: "blur",
                },
            ],
            contents: [
                {
                    required: true,
                    message: "请输入更新内容",
                    trigger: "blur",
                },
            ]
        })
        const addFormRef = ref(null)
        /**
         * 分页查询更新日志
         */
        const pageSearchUpdateLog = () => {
            page(searchParam).then(res => {
                data.updateLogs = res.data.records
                data.total = res.data.total
            })
        }
        const addView = (row, type) => {
            if (type === 'add') {
                data.title = '添加更新日志'
                reset();
            } else {
                data.title = '编辑更新日志'
                data.updateLogUuid = row.uuid
                updateLogAddOrUpdateData.version = row.version
                row.contents.forEach(content => {
                    data.contentItems.push({
                        content: content
                    })
                })
            }
            data.updateLogAddOrUpdateDisable = true
        }
        /**
         * 重置添加数据
         */
        const reset = () => {
            updateLogAddOrUpdateData.version = ''
            updateLogAddOrUpdateData.contents = []
            data.contentItems = []
            data.updateLogUuid = ''
        }
        /**
         * 添加内容
         */
        const addContent = () => {
            data.contentItems.push({
                content: ''
            })
        }
        /**
         * 删除内容
         * @param index
         */
        const deleteContent = (index) => {
            data.contentItems.splice(index, 1)
        }
        /**
         * 添加或修改更新日志
         */
        const addOrUpdateLog = () => {
            data.contentItems.forEach(contentItem => {
                if (contentItem.content !== '' && contentItem.content != null) {
                    updateLogAddOrUpdateData.contents.push(contentItem.content)
                }
            })
            if (updateLogAddOrUpdateData.contents.length !== data.contentItems.length) {
                updateLogAddOrUpdateData.contents = []
            }
            addFormRef.value.validate((valid) => {
                if (!valid) {
                    return false
                }
                if (data.updateLogUuid) {
                    // 修改
                    update(updateLogAddOrUpdateData, data.updateLogUuid).then(() => {
                        ElMessage({
                            message: '修改成功',
                            type: 'success',
                        })
                        data.updateLogAddOrUpdateDisable = false
                        pageSearchUpdateLog()
                    })
                } else {
                    // 添加
                    add(updateLogAddOrUpdateData).then(() => {
                        ElMessage({
                            message: '添加成功',
                            type: 'success',
                        })
                        data.updateLogAddOrUpdateDisable = false
                        pageSearchUpdateLog()
                    })
                }
            })
        }
        /**
         * 删除更新日志
         */
        const deleteUpdateLog = (uuid) => {
            deleted(uuid).then(() => {
                ElMessage({
                    message: '删除成功',
                    type: 'success',
                })
                pageSearchUpdateLog()
            })
        }
        /**
         * 推送更新日志
         * @param uuid
         */
        const pushUpdateLog = (uuid) => {
            push(uuid).then(() => {
                ElMessage({
                    message: '推送成功',
                    type: 'success',
                })
                pageSearchUpdateLog()
            })
        }
        /**
         * 关闭弹窗
         */
        const handleClose = () => {
            ElMessageBox.confirm('确定要关闭吗？关闭后数据将丢失',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '删除',
                    type: 'warning',
                })
                .then(() => {
                    data.updateLogAddOrUpdateDisable = false
                })
        }
        onMounted(() => {
            pageSearchUpdateLog()
        })
        return {
            searchParam,
            data,
            rules,
            updateLogAddOrUpdateData,
            addFormRef,
            addView,
            addContent,
            addOrUpdateLog,
            deleteUpdateLog,
            pushUpdateLog,
            deleteContent,
            handleClose
        }
    }
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 600px;
}
</style>